<template>
  <el-tabs v-model="activeName" type="border-card" style="padding-left: 8px;margin-left: 10px;margin-top: 10px" @tab-click="tabClick">
    <el-tab-pane label="出售中产品" name="1">
      <span slot="label"><i class="el-icon-truck"></i> 出售中产品</span>
    </el-tab-pane>
    <el-tab-pane label="待上架产品" name="0">
      <span slot="label"><i class="el-icon-document-delete"></i> 待上架产品</span>
    </el-tab-pane>
    <product-list ref="onlineProduct" :status="activeStatus"/>
  </el-tabs>
</template>

<script>
import productList from '@/views/product/product/product_list.vue'
import '@/assets/styles/description.scss'

export default {
  name: 'Product',
  components: { productList },
  data() {
    return {
      activeName: '1',
      activeStatus: 1
    }
  },
  methods: {
    tabClick(tab, event) {
      this.activeStatus = Number(tab.name)
      this.$nextTick(()=>{
        this.$refs.onlineProduct.toQuery()
      })
    }
  }
}
</script>

<style scoped>
</style>
